<script setup>
import { useRouter, useRoute } from 'vue-router'
import RegisterComponent from '../components/Register.vue'
import { useAuth } from '../composables/useAuth'
import { ArrowLeft } from '@element-plus/icons-vue' // 导入返回图标

const router = useRouter()
const route = useRoute()
const { login } = useAuth() // login 用于注册成功后自动登录

const handleRegisterSuccess = (authData) => {
  if (authData && authData.token && authData.user) {
    login(authData.token, authData.user); // 注册成功后自动登录
    const redirectPath = route.query.redirect || '/chat';
    router.push(redirectPath);
  } else {
    console.error("Register success event missing data:", authData);
  }
}

const switchToLogin = () => {
  router.push({ name: 'Login' });
}

// 添加：返回首页方法
const goBackHome = () => {
  router.push({ name: 'Landing' });
}
</script>

<template>
  <div class="auth-page-container simple-login"> <!-- 应用相同类名 -->
    <!-- 添加返回首页按钮 -->
    <button @click="goBackHome" class="back-home-btn">
      <el-icon><ArrowLeft /></el-icon> 返回首页
    </button>

    <!-- 注册表单容器 -->
    <div class="auth-content-panel simple-panel"> <!-- 应用相同类名 -->
      <RegisterComponent
        @register-success="handleRegisterSuccess"
        @switch-to-login="switchToLogin"
      />
    </div>
  </div>
</template>

<style scoped>
/* 容器样式 (与 LoginPage 相同) */
.auth-page-container.simple-login {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  min-height: 100vh;
  background: linear-gradient(120deg, #f0f4f8 0%, #e2eafc 100%);
  padding: 2rem;
  box-sizing: border-box;
  position: relative;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  overflow: hidden;
}

/* 返回首页按钮样式 (与 LoginPage 相同) */
.back-home-btn {
  position: absolute;
  top: 2rem;
  left: 2rem;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #333;
  padding: 0.6rem 1.2rem;
  border-radius: 980px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 10;
}
.back-home-btn:hover {
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.back-home-btn .el-icon {
  font-size: 1.1em;
}

/* 内容面板样式 - 移除背景和阴影 (与 LoginPage 相同) */
.auth-content-panel.simple-panel {
  width: 100%;
  max-width: 480px; /* 增大最大宽度 */
  background-color: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  margin-top: 2rem;
}

/* 调整 :deep 样式以匹配新风格 */
:deep(.auth-content-panel.simple-panel h2) { /* 注册组件内部标题 */
  text-align: center;
  color: #1a1a1a;
  font-size: 1.6rem;
  font-weight: 600;
  margin-bottom: 2.5rem;
}

/* 隐藏标签 */
:deep(.auth-content-panel.simple-panel .el-form-item__label) {
  display: none;
}

:deep(.auth-content-panel.simple-panel .el-form-item) {
  margin-bottom: 1.8rem; /* 调整输入框间距 */
}

:deep(.auth-content-panel.simple-panel .el-input__wrapper) {
  border-radius: 16px; /* 增大圆角 */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06) !important;
  background-color: #ffffff;
  border: 1px solid #e8e8e8;
  padding: 0.2rem 1.2rem;
  height: 52px; /* 增大高度 */
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
:deep(.auth-content-panel.simple-panel .el-input__wrapper.is-focus) {
  border-color: #007aff;
  box-shadow: 0 4px 15px rgba(0, 122, 255, 0.1) !important;
  background-color: #fff;
}
:deep(.auth-content-panel.simple-panel .el-button--primary) {
  width: 100%;
  height: 54px; /* 增大按钮高度 */
  border-radius: 16px; /* 匹配输入框圆角 */
  background-color: #007aff;
  border-color: #007aff;
  font-size: 1.1rem; /* 增大字体 */
  font-weight: 500;
  margin-top: 1.5rem;
  transition: background-color 0.3s ease, transform 0.2s ease;
  box-shadow: 0 6px 18px rgba(0, 122, 255, 0.2);
}
:deep(.auth-content-panel.simple-panel .el-button--primary:hover) {
  background-color: #0056b3;
  border-color: #0056b3;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 122, 255, 0.25);
}
:deep(.auth-content-panel.simple-panel .switch-auth-mode) {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.9rem;
  color: #666;
}
:deep(.auth-content-panel.simple-panel .switch-auth-mode span) {
  color: #007aff;
  cursor: pointer;
  font-weight: 500;
}
</style>